<template>
  <div class="SelectAction">
    <div class="SelectActionContent">
      <c-button quaternary circle strong iconName="DeleteForeverFilled" @click="() => {
        beSelectChat.forEach(e => {
          deleteMessage(e)
        })
      }"></c-button>
      <c-button quaternary circle strong iconName="CloseOutlined" @click="close"></c-button>
    </div>
  </div>
</template>

<script setup lang='ts'>
const { beSelectChat, disabled } = useDragSelectAction()
const { deleteMessage } = useMessages()
const emits = defineEmits(['close'])
const close = () => {
  beSelectChat.value = []
  disabled.value = false
  emits('close')
} 
</script>

<style lang="scss" scoped>
.SelectAction {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  padding-bottom: 15px;
}

.SelectActionContent {
  border-radius: 8px;
  background: #28282c;
  width: 100%;
  border: 1px solid #7fe7c4;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
</style>